<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小区物业管理网站</title>
<style>
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f5f5f5;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.stats {
	background-color: #fff;
	padding: 20px;
	box-shadow: 0px 0px 10px #ccc;
	margin-bottom: 20px;
	flex: 1 1 30%;
}

.stats h2 {
	font-size: 24px;
	margin-bottom: 10px;
}

.stats canvas {
	max-width: 100%;
	height: auto;
}
</style>
</head>
<body>
	<div class="container">
		<div class="stats">
			<h2>小区绿化率</h2>
			<canvas id="green-chart"></canvas>
		</div>
		<div class="stats">
			<h2>小区人数统计</h2>
			<canvas id="population-chart"></canvas>
		</div>
		<div class="stats">
			<h2>小区入住率</h2>
			<canvas id="occupancy-chart"></canvas>
		</div>
		<div class="stats">
			<h2>物业好评率</h2>
			<canvas id="satisfaction-chart"></canvas>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
		var greenChart = new Chart(document.getElementById('green-chart'), {
			type : 'pie',
			data : {
				labels : [ '绿化面积', '非绿化面积' ],
				datasets : [ {
					data : [ 70, 30 ],
					backgroundColor : [ '#2ecc71', '#e74c3c' ]
				} ]
			}
		});

		var occupancyChart = new Chart(document
				.getElementById('occupancy-chart'), {
			type : 'line',
			data : {
				labels : [ '2018', '2019', '2020', '2021', '2022', '2023' ],
				datasets : [ {
					label : '入住率',
					data : [ 60, 65, 70, 75, 80, 85 ],
					borderColor : '#3498db',
					fill : false
				} ]
			}
		});

		var populationChart = new Chart(document
				.getElementById('population-chart'), {
			type : 'bar',
			data : {
				labels : [ '2018', '2019', '2020', '2021', '2022', '2023'],
				datasets : [ {
					label : '居民人数',
					data : [ 1000, 1200, 1400, 1600, 1800, 2000 ],
					backgroundColor :'#3498db' 
				} ]
			}
		});

		var satisfactionChart = new Chart(document
				.getElementById('satisfaction-chart'), {
			type : 'bar',
			data : {
				labels : [ '服务态度', '服务效率', '服务质量' ],
				datasets : [ {
					label : '好评率',
					data : [ 80, 75, 85 ],
					backgroundColor : [ '#f1c40f', '#e67e22', '#2ecc71' ]
				} ]
			}
		});
	</script>
</body>
</html>